import React, {useRef} from 'react';
import {
  StyleSheet,
  Text,
  ScrollView,
  Button,
  ScrollView as ScrollViewType, // 导入ScrollViewType用于TypeScript类型注解
} from 'react-native';

const App = () => {
  // 创建一个ref引用，指向ScrollView组件，并指定其类型
  // 这样TypeScript才能识别ScrollView的方法
  const scrollViewRef = useRef<ScrollViewType>(null);

  // 定义滚动到底部的函数
  const scrollToBottom = () => {
    // 使用可选链操作符(?.)安全地访问current属性
    // scrollToEnd方法会使ScrollView滚动到内容的底部
    // {animated: true}参数使滚动带有动画效果
    scrollViewRef.current?.scrollToEnd({animated: true});
  };

  return (
    // 将ref绑定到ScrollView，这样就可以通过ref控制ScrollView
    <ScrollView ref={scrollViewRef} style={styles.scrollView}>
      {/* 按钮组件，点击时触发scrollToBottom函数 */}
      <Button title="滚动到底部" onPress={scrollToBottom} />
      <Text style={styles.text}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </Text>
      <Text style={styles.text}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.
      </Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;
